<template>
  <div class="drive-manage">
    <div>
      <el-button
          @click="showAddDriveDialogBtn"
          style="color: #545c64;margin-bottom: 20px"
          round
          size="small"
      >
        添加
        <el-icon style="margin: 0 10px">
          <Plus/>
        </el-icon>
      </el-button>
    </div>
    <el-card>
      <template #header>
        <h5>
          已添加的设备
        </h5>
      </template>
      <div class="yet-drive-list">
        <template v-if="Devices.length>0">
          <div
              v-for="(item, index) in Devices"
              :key="index"
              class="yet-drive-item cursor-cp"
          >
            <h2 @click="SelectedDeviceItem(item,index)">
              ID:{{ item.Id }}
              <svg-icon :size="50" :icon-class="item.DeviceType" style="margin-right: 10px;"/>
              <n-icon size="40">
                <HardwareChipIcon/>
              </n-icon>
              {{ item.DeviceName }}
            </h2>
          </div>
        </template>
        <div
            v-else
            style="display: flex;justify-items: center;justify-content: center;width: 100%;
            flex-direction: column;align-items: center"
        >
          <svg-icon :size="222" icon-class="energy" style="color: #c8c8c8"/>
          <label style="color: #c8c8c8">设备都去哪啦</label>
        </div>
      </div>
    </el-card>
    <!--    </el-dialog>-->

    <!--   选择新增的设备 -->
    <add-drive-dialog :show="ShowAddDriveDialog"
                      @close="OnCloseAddDriveDialog" @SelectDevice="onSelectDevice">
    </add-drive-dialog>
    <transition name="fade" mode="out-in">
      <el-dialog
          :close-on-click-modal="false"
          :title="'编辑设备：'+AddDeviceTemp?.DeviceName"
          custom-class="edit-drive-dialog us-none"
          v-model.value="ShowEditDriveDialog"
          width="55%"
          top="12vh"
          :before-close="OnCloseEditDriveDialog"
      >
        <component
            :id="AddDeviceTemp.Id"
            :is="components[AddDeviceTemp.DeviceType]"
            :ref="(el) => { if (el) refsObject[AddDeviceTemp.DeviceType] = el }"
            @close="OnClose"
        />
      </el-dialog>
    </transition>
  </div>
</template>
<script setup>

import AddDriveDialog from './DeviceHubDialog.vue'
import PLC_S71200 from './plc/EditDriveDialog.vue'
import DATABASE from './database/Index.vue'
import MYSQL from './database/Index.vue'
import SERIAL_PORT from './SerialPort/Index.vue'
import SOCKET_CLIENT from './Socket/Index.vue'
import SOCKET_SERVER from './Socket/Server.vue'
import { watch, ref, onMounted, nextTick } from "vue";
import { icon } from '@/plugins'
import { Device } from "@/api/DeviceApi";

import { useFlowStore } from "@/store/modules/flow/flowStore";

const components = { SOCKET_CLIENT, SOCKET_SERVER, DATABASE, PLC_S71200, MYSQL, SERIAL_PORT }
const Emits = defineEmits(['close'])
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
})

const FlowStore = useFlowStore()
watch(() => props.show, (v) => {
  if (v) {
    this.initDrive()
  }
})
const HardwareChipIcon = icon.ionicons5.HardwareChipIcon
const Devices = ref([])
const ShowAddDriveDialog = ref(false)
const ShowEditDriveDialog = ref(false)
const DeviceVisible = ref(false)
const CurrentDriveIndex = ref()
const AddDeviceTemp = ref({})

onMounted(() => {
  initDrive()
})
const OnClose = () => {
  ShowEditDriveDialog.value = false
  FlowStore.UpdateDevice(res => {
    initDrive()
  })
}

const initDrive = () => {
  Devices.value = FlowStore.Device.filter(l => l.Id > 0)
}

const SelectedDeviceItem = (Device, index) => {
  onSelectDevice(Device)
  SetValue(Device)
  CurrentDriveIndex.value = index
}
const showAddDriveDialogBtn = () => {
  ShowAddDriveDialog.value = true
}

const OnCloseAddDriveDialog = () => {
  ShowAddDriveDialog.value = false
}
const OnCloseEditDriveDialog = () => {
  OnClose()
}
/**
 * 刷新数据
 * @constructor
 */
const OnRefresh = () => {
  initDrive()
}

/**
 * 监听设备
 * @param Device
 */
const onSelectDevice = (Device) => {
  AddDeviceTemp.value = Device
  ShowEditDriveDialog.value = true
  SetValue(Device)
}
const refsObject = ref({});
const SetValue = (item) => {
  nextTick(() => {
    const ElementRef = refsObject.value[item.DeviceType];
    if (ElementRef && typeof ElementRef._Show === "function") {
      ElementRef._Show(item)
    }
  })
}
const handleClose = (done) => {
  DeviceVisible.value = false
  Emits('close')
}

</script>
<style lang="less">
.drive-manage {
}

.yet-drive-list {
  display: flex;
  flex-wrap: wrap;
  user-select: none;
  overflow-y: scroll;
  height: calc(100vh - 600px);

  .yet-drive-item {
    cursor: pointer;
    padding: 20px;
    margin: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    height: 45px;

    h2 {
      display: flex;
      align-items: center;
      cursor: pointer;
    }
  }
}
</style>
